<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="{% static 'css/wxroom.css' %}">
    {#    <link rel="stylesheet" href="{% static 'css/bootstrap-grid.css' %}">#}
    {#    <link rel="stylesheet" href="{% static 'css/bootstrap-reboot.css' %}">#}
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">


    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

{#    <script src="{% static 'js/bootstrap.bundle.js' %}"></script>#}
{#    <script src="{% static 'js/bootstrap.js' %}"></script>#}

</head>
<body>


<!-- 聊天室 -->
<div class="container">
    <div class="content" id="chat-log">
        <div class="item item-center"><span>昨天 12:35</span></div>
        <div class="item item-center"><span>聊天室已创建，现在可以开始聊天了。</span></div>

        {% for msg in msgs %}
            {% if not msg.image %}
                <!-- 如果是文本消息，则显示文本内容 -->
                <div class="item item-center"><span>{{ msg.create_time }}</span></div>
                <div class="item item-left">
                    <div class="avatar"><img src="{% static 'img/女阿狸.jpg' %}"/></div>
                    <div class="bubble bubble-left">{{ msg.content }}<br/></div>
                </div>
            {% else %}
                <!-- 如果是图片消息，则显示图片 -->
                <div class="item item-left">

                    <div class="avatar"><img src="{% static 'img/女阿狸.jpg' %}"/></div>

                    <!-- 旧代码 -->
                    {#                    <img src="http://{{ request.get_host }}/static/media/{{ msg.image.url }}"#}
                    {#                         alt="{{ msg.username }}发送的图片" height="30%" width="30%">#}

                    <!-- 触发弹窗 - 图片改为你的图片地址 -->
                    <img src="http://{{ request.get_host }}/static/media/{{ msg.image.url }}"
                         alt="{{ msg.username }}发送的图片" width="300" height="200">

                    <!-- 弹窗 -->
                    <div id="myModal" class="modal">

                        <!-- 关闭按钮 -->
                        <span class="close"
                              onclick="document.getElementById('myModal').style.display='none'">&times;</span>

                        <!-- 弹窗内容 -->
                        <img class="modal-content" id="img01">

                        <!-- 文本描述 -->
                        <div id="caption"></div>
                    </div>

                </div>

            {% endif %}
        {% endfor %}
    </div>

    <div class="input-area" style="height:200px;overflow:auto">

        <textarea name="text" id="textarea">

        </textarea>

        <div class="button-area">
            <button id="send-btn" onclick="send()">发 送</button>
        </div>

        <!-- 发送图片按钮 -->
        <div class="button-area">
            <label for="imageInput">上传文件</label>
            <input type="file" id="imageInput" name="avatar" accept="image/png, image/jpeg"/>
            <button id="sendButton">发送图片</button>
        </div>

    </div>
</div>

<script type="text/javascript" src="{% static 'js/wxroom_text.js' %}"></script>

</body>
</html>